<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>document</title>
		<style>
			body { margin: 0; }
      canvas { width: 100%; height: 100%; }
		</style>
	</head>
	<body>
		<script src="../js/three.js"></script>
		<script>
      // 场景
			const scene = new THREE.Scene()
      // 相机
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

      // 创建渲染器实例
      const renderer = new THREE.WebGLRenderer()
      // 设置渲染器尺寸
      renderer.setSize(window.innerWidth, window.innerHeight)
      // 将渲染器的dom 元素添加到 html 文档中
      document.body.appendChild(renderer.domElement)

      // 定义光源
      const spotlight = new THREE.SpotLight(0xFFFFFF)
      // 光源位置
      spotlight.position.set(-10, 5, 10)
      // 添加光源
      scene.add(spotlight)

      
      const loader = new THREE.FontLoader()
      loader.load('./fonts/font2.json', function(font) {
        const geometry = new THREE.TextGeometry('哈哈', {
          font: font, // 使用的字体库
          size: 0.6, // 绘制字体的大小
          height: 0.2 // 绘制字体的厚度
        })
        // 定义可以反光的材料，也可以使用 MeshBasicMeterial ，只是对光源无效
        const material = new THREE.MeshLambertMaterial({ color: 'skyblue' })
        const textMesh = new THREE.Mesh(geometry, material)
        scene.add(textMesh)
        textMesh.position.set(-2.5, 4, -7.4)
      })
      // 渲染场景（渲染循环）
      function animate() {
        requestAnimationFrame(animate)
        renderer.render(scene, camera)
      }
      animate()
      
		</script>
	</body>
</html>